<template>
  <view class="container">
    <view class="top-left-title">学习践行心得</view>
    <view class="gray-line"></view>
    <view class="center-subtitle">学习践行心得</view>
    <view class="info">
      <view>每日国学线上课堂学习;</view>
      <view>今日功课</view>
      <template v-if="type === '1' || type === '3'">
        <view class="homework-title">{{ title }}</view>
        <view class="homework-content" v-html="content"></view>
      </template>
      <template v-if="type === '2'">
        <video :src="content" controls class="homework-video"></video>
      </template>
    </view>
    <button class="do-homework-btn" @click="openTextarea" v-if="!hasOver">填写作业</button>
    <view v-if="showTextarea" class="textarea-container">
      <textarea v-model="userInput" class="textarea"></textarea>
      <button class="submit-btn" @click="submitHomework">提交</button>
    </view>
    <view class="gray-card">
      <view class="card-header">{{numbers}}人已做作业</view>
      <view
        class="card-item"
        v-for="(item, index) in doneUsers"
        :key="index"
      >
        <view class="user-info">
          <image :src="item.face" mode="aspectFit"></image>
          <view class="user-name">{{ item.name }}</view>
          <view class="user-time">{{ item.createTime }}</view>
        </view>
        <view class="user-experience">{{ item.content }}</view>
        <view
          v-for="(commentItem, commentIndex) in item.comments"
          :key="commentIndex"
        >
          <view class="comment-info">
            <image :src="commentItem.face" mode="aspectFit"></image>
            <view class="comment-content">
              <view class="user-name">{{ commentItem.name }}</view>
              <view class="user-time">{{ commentItem.content }}</view>
            </view>
          </view>
        </view>
        <view class="like-section">
          <image
            class="like-icon"
            src="/static/img/pl.jpg"
            @click="openComment(item)"
          ></image>
          <image
            class="like-icon"
            src="/static/img/like.jpg"
            @click="likeComment(item)"
          ></image>
          <text class="like-count">{{ item.likeCount }}</text>
        </view>
        <view
          v-if="item.showComment"
          class="textarea-container"
        >
          <textarea
            v-model="item.commentStr"
            class="textarea"
          ></textarea>
          <button
            class="submit-btn"
            @click="addComment(item)"
          >提交</button>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      comment: '',
      courseId: '',
      numbers: '0',
      // 模拟已做作业的用户数据
      doneUsers: [],
      content: '',
	  hasOver:'',
      day: '',
      classId: '',
      currentSessionNumber: '',
      showTextarea: false, // 控制文本域的显示
      userInput: '', // 存储用户输入的内容
      like: true,
      type: '', // 新增 type 字段
      title: '' ,// 新增 title 字段
	  id:''
    };
  },
  onLoad(options) {
    this.courseId = options.courseId;
    this.classId = options.classId;
    this.content = options.content;
    this.title = options.title; // 获取 title
    this.day = options.day;
    this.id = options.id;
    this.hasOver = options.hasOver === '1';
    this.currentSessionNumber = options.currentSessionNumber;
    this.type = options.type; // 获取 type
    this.getOtherWork();
  },
  methods: {
    openTextarea() {
      this.showTextarea = true;
    },
    openComment(item) {
      // 使用 this.$set 确保 Vue 检测到数据变化
      this.$set(item, 'showComment', true);
      // 重置其他项的 showComment 状态为 false
      this.doneUsers.forEach(user => {
        if (user!== item) {
          this.$set(user,'showComment', false);
        }
      });
    },
    addComment(item) {
      uni.request({
        url: 'http://localhost:9090/user/addComment',
        method: 'POST',
        data: {
          content: item.commentStr,
          id: item.id,
          studentId: uni.getStorageSync('userInfo').id
        },
        success: (res) => {
          item.commentStr = '';
          this.getOtherWork();
          // 使用 this.$set 确保 Vue 检测到数据变化
          this.$set(item,'showComment', false);
        },
        fail: (err) => {
          console.error('获取课程列表失败:', err);
        }
      });
    },
    getOtherWork() {
      uni.request({
        url: 'http://localhost:9090/user/getOtherWork',
        method: 'POST',
        data: {
          workId: this.id,
          studentId: uni.getStorageSync('userInfo').id
        },
        success: (res) => {
          this.doneUsers = res.data.data;
          // 初始化每个评论项的 showComment 和 commentStr 属性
          this.doneUsers.forEach(user => {
            this.$set(user,'showComment', false);
            this.$set(user, 'commentStr', '');
          });
          this.numbers = res.data.data.length;
        },
        fail: (err) => {
          console.error('获取课程列表失败:', err);
        }
      });
    },
    submitHomework() {
      if (this.userInput) {
        uni.request({
          url: 'http://localhost:9090/user/addHomeWork',
          method: 'POST',
          data: {
            workId:this.id,
            studentId: uni.getStorageSync('userInfo').id,
            content: this.userInput
          },
          success: (res) => {},
          fail: (err) => {
            console.error('获取课程列表失败:', err);
          }
        });

        uni.showToast({
          title: '提交成功',
          icon: 'none'
        });
        // 清空文本域
        this.userInput = '';
        // 隐藏文本域
        this.showTextarea = false;
      } else {
        uni.showToast({
          title: '请填写作业',
          icon: 'none'
        });
      }
    },
    likeComment(item) {
      if (this.like) {
        uni.request({
          url: 'http://localhost:9090/user/like',
          method: 'POST',
          data: {
            id: item.id
          },
          success: (res) => {
            item.likeCount++;
            this.like = false;
          },
          fail: (err) => {}
        });
      } else {
        uni.showToast({
          title: '不能重复点赞',
          icon: 'none'
        });
      }
    }
  }
};
</script>

<style scoped>
.container {
  padding: 20px;
}

.top-left-title {
  font-size: 16px;
  top: 20px;
  left: 20px;
}

.center-subtitle {
  font-size: 20px;
  text-align: center;
  margin-bottom: 20px;
}

.info {
  margin-bottom: 20px;
}

.homework-title {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 5px;
}

.homework-content {
  margin-top: 10px;
}

.homework-video {
  width: 100%;
  margin-top: 10px;
}

.do-homework-btn {
  width: 100px;
  height: 50px;
  background-color: #a95e5e;
  color: #000;
  text-align: center;
  margin: 0 auto;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
}

.textarea-container {
  margin-top: 20px;
}

.textarea {
  width: 100%;
  height: 150px;
  padding: 10px;
  margin-bottom: 10px;
  border: 1px solid #ccc;
  border-radius: 5px;
}

.submit-btn {
  width: 100px;
  height: 50px;
  background-color: #a95e5e;
  color: #000;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 5px;
  padding: 10px;
  font-size: 16px;
  margin: 0 auto;
}

.gray-card {
  background-color: #f0f0f0;
  border-radius: 5px;
  padding: 20px;
  margin-top: 20px;
}

.card-header {
  font-size: 16px;
  margin-bottom: 10px;
}

.card-item {
  margin-bottom: 15px;
  display: flex;
  flex-direction: column;
}

.user-info {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.user-info image {
  width: 50px;
  height: 50px;
  border-radius: 50%;
  margin-right: 10px;
}

.user-name {
  font-size: 16px;
}

.user-time {
  font-size: 12px;
  color: gray;
  margin-left: 10px;
}

.user-experience {
  font-size: 14px;
}

.gray-line {
  border-top: 1px solid #ccc;
  margin: 20px 0;
}

.like-section {
  display: flex;
  align-items: center;
  margin-top: 5px;
  justify-content: flex-end;
}

.like-icon {
  width: 20px;
  height: 20px;
  margin-right: 5px;
  cursor: pointer;
}

.like-count {
  margin-right: 10px;
}

.comment-info {
  display: flex;
  align-items: center;
  margin-bottom: 5px;
}

.comment-info image {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: 10px;
}

.comment-content {
  display: flex;
  flex-direction: column;
}
</style>    